<!--银行卡转账审核列表-->
<template>
    <div class="transferAuditList">
        <el-form :inline="true" :model="searchParams">
            <el-form-item label="客户：">
                <el-input v-model="searchParams.customerName" placeholder="请输入购房者姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
                <el-input v-model="searchParams.customerPhone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="支付方式:">
                <el-select v-model="searchParams.payType" filterable >
                    <el-option v-for="item in payMthods"
                               :key="item.label"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="意向楼盘：">
                <el-select
                        v-model="searchParams.devId"
                        placeholder="请输入意向楼盘"
                        filterable
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item,index) in allEstateList" :key="index" :label="item.devName" :value="item.devId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付金额：">
                <el-input v-model="searchParams.beginPay" class="w100" placeholder="输入最小值"></el-input>
                ——
                <el-input v-model="searchParams.endPay" class="w100" placeholder="输入最大值"></el-input>
            </el-form-item>
            <el-form-item label="支付时间：">
                <el-date-picker
                        v-model="searchParams.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="审核状态：">
                <el-select v-model="searchParams.auditStatus" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="未审核" value="0"></el-option>
                    <el-option label="审核成功" value="1"></el-option>
                    <el-option label="审核拒绝" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="交易订单号：">
                 <el-input v-model="searchParams.tradeOrderCode" placeholder="请输入交易订单号"></el-input>
            </el-form-item>   
            <el-form-item>
                <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
                <el-button @click="onClear">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="serialNumber" label="交易流水号"></el-table-column>
            <el-table-column align="center" prop="orderCode" label="订单编号"></el-table-column>
            <el-table-column align="center" prop="customerName" label="客户"></el-table-column>
            <el-table-column align="center" prop="customerPhone" label="手机号" :formatter="formatterTable.formatPhoneNumber"></el-table-column>
            <el-table-column align="center" prop="pay" label="支付金额" :formatter="formatterTable.formatMoney"></el-table-column>
            <el-table-column align="center" prop="payType" label="支付方式" :formatter="formatterTable.payTypeHander"></el-table-column>
            <el-table-column align="center" prop="devName" label="意向楼盘"></el-table-column>
            <el-table-column align="center" prop="payTime" label="支付时间" :formatter="formatterTable.payTime"></el-table-column>
            <el-table-column align="center" prop="tradeOrderCode" label="交易订单号"></el-table-column>
            <el-table-column align="center" prop="auditStatus" label="审核状态" :formatter="formatterTable.auditStatus"></el-table-column>
            <el-table-column align="center" prop="submitPerson" label="提交人"></el-table-column>
            <el-table-column align="center" prop="updateTime" sortable label="提交时间" :formatter="formatterTable.payTime"></el-table-column>
            <el-table-column align="center" prop="address" label="操作" width="120">
                <template slot-scope="scope">
                    <a href="javascript:;;" :class="scope.row.auditStatus === 0 ? 'handleA mr20':'handleA disabled mr20'  " @click="goDetailPage('audit', scope.row.id, scope.row.auditStatus)">审核</a>
                    <a href="javascript:;;" class="handleA" @click="goDetailPage('view', scope.row.id)">查看</a>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import uploadImg from "@/components/common/uploadImg"
    import api from '@/api/apiPath'
    import utils from '@/common/utils.js'

    export default {
        name: 'transferAuditList',
        title:'线下支付审核',
        data() {
            return {
                allEstateList: [],
                searchParams: {
                    customerName: "",
                    customerPhone: "",
                    bankCardNum: "",
                    devId: "",
                    beginPay: "",
                    endPay: "",
                    beginTime: "",
                    endTime: "",
                    auditStatus: "",
                    time: ["", ""],
                    payType:'',//支付方式
                    tradeOrderCode:'',//交易订单号
                },
                tableData: [],
                payMthods: [
                    {label:'全部',value:''},
                    {label:'银行转账',value:0},
                    {label:'微信支付',value:1},
                    {label:'支付宝支付',value:2},
                    {label:'刷卡',value:3},
                    {label:'现金',value:4},
                    {label:'云闪付支付',value:5},
                ],
                tableConfig: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 10
                },
                formatterTable: {
                    payTypeHander(row,column,cellValue){
                        if (cellValue === 0) {
                            return '银行转账'
                        }else if(cellValue === 1){
                            return '微信支付'
                        }else if (cellValue === 2) {
                            return '支付宝支付'
                        }else if (cellValue === 3) {
                            return '刷卡'
                        }else if (cellValue === 4) {
                            return '现金'
                        }else if (cellValue === 5) {
                            return '云闪付支付'
                        }
                    },
                    auditStatus(row, column, cellValue) {
                        return ['待审核', '审核成功', '审核拒绝'][cellValue]
                    },
                    payTime(row, column, cellValue) {
                        let time = utils.getTimeString(cellValue);
                        if (column.property === 'payTime') {
                            return time.split(" ")[0]
                        } else {
                            return time
                        }
                    },
                    formatBankCard(row, column, cellValue) {
                        return utils.formatBankCard(cellValue)
                    },
                    formatPhoneNumber(row, column, cellValue) {
                        return utils.formatPhoneNumber(cellValue)
                    },
                    formatMoney(row, column, cellValue) {
                        return utils.formatMoney(cellValue)
                    }
                }
            }
        },
        created() {
            this.queryAllEstate();
            this.getTableList();
        },
        activated(){
            this.onSearch();
        },
        mounted() {

        },
        methods: {
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getTableList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getTableList()
            },
            getTableList() {
                this.axios.post(api.raiseTransferList, {
                    pageNum: this.tableConfig.pageNum,
                    pageSize: this.tableConfig.pageSize,
                    customerName: this.searchParams.customerName,
                    customerPhone: this.searchParams.customerPhone,
                    bankCardNum: this.searchParams.bankCardNum,
                    devId: this.searchParams.devId,
                    beginPay: this.searchParams.beginPay,
                    endPay: this.searchParams.endPay,
                    beginTime: this.searchParams.time[0] ? utils.getTimeString(this.searchParams.time[0] * 1) : "",
                    endTime: this.searchParams.time[1] ? utils.getTimeString(this.searchParams.time[1] * 1) : "",
                    auditStatus: this.searchParams.auditStatus,
                    payType: this.searchParams.payType,
                    tradeOrderCode: this.searchParams.tradeOrderCode,
                }).then((res) => {
                    this.tableData = res.data.data.list;
                    this.tableConfig.totalSize = res.data.data.total;
                })
            },
            onSearch() {
                this.tableConfig.pageNum = 1;
                this.getTableList()
            },
            onClear() {
                this.searchParams = {
                    customerName: "",
                    customerPhone: "",
                    bankCardNum: "",
                    devId: "",
                    beginPay: "",
                    endPay: "",
                    beginTime: "",
                    endTime: "",
                    auditStatus: "",
                    time: ["", ""],
                    payType:'',
                    tradeOrderCode:'',
                }
            },
            goDetailPage(type, id, isAudit) {
                if (!isAudit) {
                    this.$router.push({path: "./transferAuditDetail", query: {type, id}})
                }
            },
            queryAllEstate() {
                this.axios.post(api.queryAllEstateShoppingCardUse, {}).then((res) => {
                    this.allEstateList = res.data.data
                })
            },
        },
        components: {
            uploadImg
        },
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
    .handleA {
        text-decoration: none;
    }

    .disabled {
        color: #aaa;
        cursor: not-allowed;
    }

    .tips {
        color: #aaa;
    }
</style>
